<template>
  <div class="text-max-box">
    <span>
      <span v-if="data.length < textLengths">
        <span
          class="tj"
          :style="{
            fontFamily: store.styleInfo.fontFamily,
            color: store.styleInfo.fontColor,
            fontSize: props.font + 'px',
          }"
          >{{ props.data }}</span
        >
      </span>
      <span v-else>
        <span
          :style="{
            fontFamily: store.styleInfo.fontFamily,
            color: store.styleInfo.fontColor,
            fontSize: props.font + 'px',
          }"
          class="tj"
          >{{ showBtn ? sliceStr : props.data }}
          <span
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              color: store.styleInfo.shmentColor,
              fontSize: props.font + 'px',
            }"
            class="btnWord"
            style="font-family: PingFangSC-Regular, PingFang SC"
            @click="showModel"
            >{{ showBtn ? tip : '收起' }}</span
          >
        </span>
      </span>
    </span>
  </div>
  <t-dialog v-model:visible="textVisible" header="描述详情">
    <div
      class="tj text-body-item"
      v-html="getTextHtml(props.data)"
      :style="{
        fontFamily: store.styleInfo.fontFamily,
        color: store.styleInfo.fontColor,
        fontSize: props.font + 'px',
      }"
    ></div>
  </t-dialog>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getTextHtml } from '@/utils/minxin';
import { computed, ref, onMounted } from 'vue';
import { useProjectStore } from '@/store';

const textVisible = ref(false);
const store = useProjectStore();
const showBtn = ref(true);
const textLengths = ref(80);
const props = defineProps({
  tip: {
    type: String,
    default: '详情',
  },
  // 数据
  data: {
    type: String,
    default: '',
  },
  // 行高
  maxLen: {
    type: Number,
    default: 3,
  },
  font: {
    type: Number,
    default: 16,
  },
  maxMargin: {
    type: Boolean,
    default: true,
  },
});
const showModel = () => {
  textVisible.value = true;
  // showBtn = !showBtn
};
const getMaxChars = (element: any) => {
  //获取一排可以放置多少个中文字符
  let arr = document.querySelector('.text-max-box');
  if (arr) {
    const rect = arr.getBoundingClientRect(); // 获取元素大小和位置信息
    const width = rect.width; // 获取元素宽度
    const charWidth = props.font; // 假设字符宽度为字体大小的60%
    const maxChars = Math.floor(width / charWidth); // 计算最大可容纳字符个数

    textLengths.value = maxChars * props.maxLen - 4;

    return maxChars;
  } else {
    textLengths.value = 80;
  }
};
const GetLength = (s) => {
  var len = 0;
  for (var i = 0; i < s.length; i++) {
    var c = s.substr(i, 1);
    var ts = escape(c);
    if (ts.substring(0, 2) == '%u') {
      len += 2;
    } else {
      len += 1;
    }
  }
  return len;
};
const sliceStr = computed(() => {
  if (props.data != null) {
    console.log(textLengths.value);
    let letstr = props.data.substring(0, textLengths.value) + '...';
    let lengts = GetLength(letstr);
    if (lengts * 2 > textLengths.value) {
      return props.data.substring(0, textLengths.value - 1) + '...';
    } else {
      return props.data.substring(0, textLengths.value) + '...';
    }
  }
  return '';
});

onMounted(() => {
  getMaxChars('mytextMaxs');
  window.addEventListener('resize', () => {
    getMaxChars('mytextMaxs');
  });
});
</script>

<style lang="less" scoped>
.text-max-box {
  width: 500px;
}
.btnWord {
  cursor: pointer;
  color: #d2ad77;
  font-weight: 400;
  line-height: 30px;
}
.tj {
  display: inline-block;
  text-align: justify;
  font-size: 16px;
  font-family: SourceHanSerifCN;
  color: #333333;
  line-height: 28px;
}
.text-body-item {
  display: flex;
  flex-direction: column;
  height: 340px;
  overflow: scroll;
  span {
    text-indent: 2em;
  }
}
:deep(.t-dialog__footer) {
  display: none;
}
</style>
